<template>
  <!-- 厂商商品选购页 -->
  <div class="manufacturer-shopping-submitOrder">
    <div class="manufacturer-shopping-wrapper">

      <div class="manufacturer-shopping-header">
        <div class="manufacturer-shopping-title">
          {{cart_infoObj.consultantName}}
        </div>
      </div>
      <!-- <div class="manufacturer-shopping-tbody" style="height: calc(100vh - 5.42rem);"> -->

      <div class="manufacturer-shopping-main">
        <comHeaderAddress class="lusir-common_cursor" ref="comHeaderAddressRef" @callback="callback"></comHeaderAddress>
        <consultantPolicy ref="consultantPolicyRef"></consultantPolicy>
        
        <div class="manufacturer-shopping-table" :style="{'background-color': cart_group.length > 0 ? '#fff' : ''}">
          <div class="manufacturer-shopping-thead">
            <div class="thead-item one">
              商品信息
            </div>
            <div class="thead-item two">
              单价
            </div>
            <div class="thead-item three">
              选购
            </div>
          </div>
          <!-- style="height: calc(100vh - 5.42rem);"  -->
          <div class="manufacturer-shopping-tbody" v-if="cart_group.length > 0">
            <div class="tbody-list-first" v-for="(item, index) in cart_group" :key="index">
              <div class="shopping-name">
                {{item.groupName}}
              </div>
              <div class="tbody-list-third" v-for="(partItem, partIndex) in item.partItems" :key="partIndex">
                <div class="tbody-item one">
                  <div class="shopping-info">
                    <div class="brandName" v-if="partItem.brandName">
                      {{partItem.brandName}}
                    </div>
                    <div class="partItemName lusir-common_cursor" v-if="partItem.displayPartsNo" @click.stop="handleClickPartItemDetail(partItem)">
                      {{partItem.displayPartsNo}}
                    </div>
                    <div class="seriesName" v-if="partItem.seriesName">
                      {{partItem.seriesName}}
                    </div>
                  </div>
                  <div class="shoppingTradeName" v-if="partItem.otherCodes">
                    {{partItem.otherCodes}}
                  </div>
                </div>
                <div v-if="partItem.price == 0" class="tbody-item two">
                  失效
                </div>
                <div v-else class="tbody-item two">
                  ¥{{partItem.price_text}}
                </div>
                <div class="tbody-item three">
                  <div class="operate" v-if="partItem.count > 0">
                    <img class="lusir-common_cursor" @click.stop="minusCount(partItem)" src="../assets/images/minus.png" alt="">
                    <div class="operate-num">
                      {{partItem.count}}
                    </div>
                    <img class="lusir-common_cursor" @click.stop="plusCount(partItem)" src="../assets/images/plus.png" alt="">
                  </div>
                  <div class="operate" v-else style="justify-content: flex-end;">
                    <img class="lusir-common_cursor" @click.stop="plusCount(partItem)" src="../assets/images/plus.png" alt="">
                  </div>
                  <div class="stock-info" v-if="consultantType == 1">
                    (库存:
                    <span class="num">{{partItem.stockCount}}</span>)
                  </div>
                </div>
              </div>
            </div>
          </div>
          <comNoData v-else :desc="'暂无商品'"></comNoData>
        </div>
      </div>

      <div class="manufacturer-shopping-footer">
        <div class="cart-info">
          <div class="price">
            合计：
            <span class="fuhao">¥</span>
            <span class="jine">{{curShopTotalPrice}}</span>
          </div>
          <div class="shopNum">
            共{{curShopTotalCount}}件商品
          </div>
        </div>
        <div v-if="paymentMethod == 1" class="cart-addBtn lusir-common_cursor" @click="submitConsultantShopOrder">
          立即支付
          <span v-if="DiscountSwitch && curShopTotalCount > 0" class="discountPrice">
            <i class="label">折后¥</i>
            <i class="price">{{DisCountPrice}}</i>
          </span>
        </div>
        <div v-else class="pay-addBtn2" @click="submitConsultantShopOrder">
          好，送过来
        </div>
      </div>

    </div>

    <lusirMessageBox :title="greaterThanStockUpperLimitTitle" :visible="isShowGreaterThanStockUpperLimitDialog" @confirm="isShowGreaterThanStockUpperLimitDialog = false" @cancel="isShowGreaterThanStockUpperLimitDialog = false">
    </lusirMessageBox>

    <lusirMessageBox :title="'请使用微信扫码支付'" :headerBorderBottom="true" :headerPaddingVertical="20" :type="'alert'" :visible="isShowQrCodeUrlDialog" @confirm="isShowQrCodeUrlDialog = false" @cancel="isShowQrCodeUrlDialog = false">
      <div class="qrCode-main">
        <img class="qrCodeImage" :src="qrCodeUrl" alt="">
        <div class="invalid-view" v-if="isInvalidShow">
          <span class="text">二维码已失效</span>
        </div>
      </div>
    </lusirMessageBox>

    <!-- <lusirMessageBox :type="'alert'" :visible="isShowFailDialog" @confirm="isShowFailDialog = false"
      @cancel="isShowFailDialog = false">
      <div class="qrCode-main">
        <img class="qrCodeImage" :src="qrCodeUrl" alt="">
        <div class="invalid-view" v-if="isInvalidShow">
          <span class="text">二维码已失效</span>
        </div>
      </div>
    </lusirMessageBox> -->

  </div>
</template>

<script>
import comHeaderAddress from "@/components/com-header-address";
import comNoData from '@/components/com-noData';
import lusirMessageBox from "@/components/lusir-MessageBox";
import consultantPolicy from "@/components/consultantPolicy";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      cart_group: [], // 购物车集合
      greaterThanStockUpperLimitTitle: "",
      propsData: {}, // 上个页面传过来的集合
      cart_infoObj: {}, // 购物车的大集合
      isShowDeliveryInstructionsDialog: false, // 是否展示配送说明弹层
      consultantPolicyObj: {
        freightPolicy: '',
        timePolicy: '',
      }, // 配送政策大集合
      shopOrderId: "", // 订单号
      isShowFreightPolicyBox: false,
      isShowTimePolicyBox: false,
      freightPolicyOpen: true, // 配送费用是否需要展开
      isShowFreightPolicyOpen: false, // 配送费用是否需要展开
      timePolicyOpen: true, // 配送费用是否展示
      isShowTimePolicyOpen: false, // 配送费用是否需要展开
      consultantType: 0, // 厂商客服1 经销商客服2
      isNextTickComplete: false, // 是否全部加载完成
      isShowGreaterThanStockUpperLimitDialog: false, // 是否展示库存大于上限弹层
      qrBaseUrl: "http://www.zhipeicloud.com/Common/QRCode?data=", // 二维码的前缀地址
      qrCodeUrl: "", // 二维码地址
      isShowQrCodeUrlDialog: false, // 是否展示帮助支付成功的弹层
      queryPayStatus: null, // 查询支付状态的定时器
      invalidSetTimeOutStatus: null,
      isInvalidShow: false, // 是否展示过期弹层
      DiscountSwitch: false,
      DiscountRate: '',
      paymentMethod: 0, // 结算方式 1是现结 3是月结

    };
  },
  created() {
    this.getConsultantShopppingCart(); // 获取购物车商品以及收货人信息
    this.GetConsultantInfo(); // 取得客服信息
  },
  computed: {
    // 合计商品数
    curShopTotalCount() {
      let totalCount = 0;
      this.cart_group.forEach(item => {
        totalCount += item.partItems.reduce((prev, cur) => {
          return prev + cur.count;
        }, 0);
      });
      return totalCount;
    },
    // 合计总价格
    curShopTotalPrice() {
      let totalPrice = 0;
      this.cart_group.forEach(item => {
        totalPrice += item.partItems.reduce((prev, cur) => {
          return prev + cur.count * cur.price;
        }, 0);
      });
      return totalPrice.toFixed(2);
    },
    DisCountPrice() {
      return (this.curShopTotalPrice * this.DiscountRate).toFixed(2);
    },
    ...mapGetters([
      "cangpei_param_gcd",
      "cangpei_param_ccd",
      "cangpei_param_ucd",
    ])
  },
  onUnload() {
    if (this.$options.data) {
      Object.assign(this.$data, this.$options.data());
    }
  },
  methods: {
    // 取得客服信息
    async GetConsultantInfo() {
      const res = await this.$imServive({
        url: "/IMConsultant/GetConsultant",
        data: {
          imConsultantCode: this.cangpei_param_ccd,
        }
      });
      this.consultantType = res.consultantType;
    },
    callback() {
      this.getConsultantShopppingCart();
    },
    // 立即支付
    async submitConsultantShopOrder() {
      let _this = this;
      this.isInvalidShow = false;
      let request_details = [];
      this.cart_group.forEach(item => {
        item.partItems.forEach(partItem => {
          if (partItem.count > 0) {
            request_details.push({
              rbdId: partItem.rbdId,
              count: partItem.count
            });
          }
        });
      });

      try {
        const res = await this.$imServive({
          url: "/IMConsultant/SubmitConsultantShopOrder",
          data: {
            imConsultantCode: this.cangpei_param_ccd,
            details: request_details,
            isShowLoading: true,
            mode: 'by_shoppingcart', // 由购物车提交订单by_shoppingcart 客服答复内直接提交订单 by_reply
          }
        });

        _this.shopOrderId = res.shopOrderId;

        //  command： 去支付的指令 gopay去支付 none无需后续动作
        if (res.command == 'gopay') {
          _this.qrCodeUrl = _this.qrBaseUrl + res.payTicket;
          _this.isShowQrCodeUrlDialog = true;
          _this.goRequestPaymentFn(res.payTaskId)
        } else {
          setTimeout(() => {
            _this.$router.push({
              path: `/consultantOrderDetail`,
              query: {
                id: _this.shopOrderId,
              },
            });
          }, 1000);
        }
      } catch (error) {
      }

    },
    // 去微信支付
    goRequestPaymentFn(payTaskId) {
      clearInterval(this.queryPayStatus);

      clearTimeout(this.invalidSetTimeOutStatus)
      this.invalidSetTimeOutStatus = setTimeout(() => {
        this.isInvalidShow = true;
      }, 180000); // 180000

      let _this = this;

      this.queryPayStatus = setInterval(async () => {
        const res = await this.$imServive({
          url: "/IMConsultant/GetConsultantOrderPaymentStatus",
          data: {
            key: payTaskId
          }
        });
        if (res.status == 'success') {
          _this.handlePayStatus(res);
        }
      }, 1000);
    },
    // 支付后的状态
    handlePayStatus(result) {
      clearInterval(this.queryPayStatus);

      if (result.status == "failed") {
        this.qrCodeUrl = "";
        this.isShowQrCodeUrlDialog = false;
        this.reason = res.reason;
      } else if (result.status == "success") {
        this.qrCodeUrl = "";
        this.isShowQrCodeUrlDialog = false;
        this.$wx.toast.success("支付成功");
        setTimeout(() => {
          this.$router.push({
            path: `/consultantOrderDetail`,
            query: {
              id: this.shopOrderId,
            },
          });
        }, 1500);
      } else {
      }
    },
    // 厂商机器人客服订单支付结果
    async consultantOrderPayResult(requestObj) {
      const res = await this.$imServive({
        url: "/IMConsultant/ConsultantOrderPayResult",
        data: {
          imConsultantCode: this.cangpei_param_ccd,
          shopOrderId: requestObj.shopOrderId,
          payResult: requestObj.payResult,
          mode: 'by_shoppingcart', // 由购物车提交订单by_shoppingcart 客服答复内直接提交订单 by_reply
        }
      });
    },
    // 报价详情
    handleClickPartItemDetail(item) {
      let partItemDetailDialog_initMode = "partItemInfo";
      let partItemDetailDialog_input = {
        partItemId: item.partItemId
      };
      let requestData = {
        partItemDetailDialog_initMode,
        partItemDetailDialog_input
      };
      this.$router.push({
        name: "partItemDetail",
        params: {
          requestData: JSON.stringify(requestData),
        },
      });
    },
    // 获取购物车商品以及收货人信息
    async getConsultantShopppingCart() {
      const res = await this.$imServive({
        url: "/IMConsultant/GetConsultantShopppingCart",
        data: {
          imConsultantCode: this.cangpei_param_ccd,
        }
      });
      let ConsigneeProps = {
        ConsigneeName: res.consigneeName, //收货人名称
        ConsigneeMobile: res.consigneeMobile, //收货人手机
        ConsigneeAddress: res.consigneeAddress, //收货人地址
        CompanyName: res.companyName, //收货人公司
      };
      let propsObj = {
        params: ConsigneeProps,
        command: 'none', // command  'auto_launch'校验信息自动打开弹层    'none' 不用校验
      }

      this.cart_group = res.cart_group;
      this.cart_infoObj = res;

      this.DiscountSwitch = res.discountSwitch;
      this.DiscountRate = res.discountRate;
      this.paymentMethod = res.paymentMethod;

      //配送政策
      // this.actionConsultantPolicy(res.freightPolicy, res.timePolicy)

      setTimeout(() => {
        this.$refs.consultantPolicyRef.actionConsultantPolicy(res)
      }, 500);

      setTimeout(() => {
        this.$refs.comHeaderAddressRef.active(propsObj);
      }, 500);
    },
    // 加数量
    plusCount(partItem) {
      if (partItem.count >= partItem.stockCount && this.consultantType == 1) {
        partItem.count = partItem.stockCount;
        this.greaterThanStockUpperLimitTitle =
          partItem.displayPartsNo + " 库存不足，无法加入清单 请调整选购数量";
        this.isShowGreaterThanStockUpperLimitDialog = true;
        return;
      }
      partItem.count = partItem.count + 1;
    },
    // 减数量
    minusCount(partItem) {
      partItem.count = partItem.count - 1;
    }
  },
  components: {
    comHeaderAddress,
    comNoData,
    lusirMessageBox,
    consultantPolicy
  }
};
</script>

<style scoped>
.manufacturer-shopping-wrapper {
  position: relative;
  height: calc(100vh - 1.6rem);
  overflow-x: hidden;
  overflow-y: auto;
}
.manufacturer-shopping-submitOrder {
  height: 100vh;
  overflow-y: scroll;
  border-top: 0.013333333333333334rem solid #e0e0e0;
}
.manufacturer-shopping-submitOrder .manufacturer-shopping-header {
  padding: 0 0.4rem;
  background-image: url("https://c1.zhipeicloud.com/cangpei_mini/images/pic_topBG.png");
  background-size: 100vw 2.4rem;
  background-position: center center;
  box-sizing: border-box;
  width: 100vw;
  height: 2.4rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-header
  .manufacturer-shopping-title {
  height: 1.12rem;
  width: 100%;
  font-weight: 500;
  color: #181818;
  display: flex;
  align-items: center;
}
.manufacturer-shopping-submitOrder .manufacturer-shopping-main {
  border-radius: 0.32rem 0.32rem 0rem 0rem;
  position: absolute;
  top: 1.12rem;
  left: 0;
  width: 100vw;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-table
  .manufacturer-shopping-thead {
  border-bottom: 0.013333333333333334rem solid #f2f2f2;
  display: flex;
  align-items: center;
  padding: 0 0.38666666666666666rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-table
  .manufacturer-shopping-thead
  .thead-item {
  box-sizing: border-box;
  padding: 0.25333333333333335rem 0 0.26666666666666666rem;
  color: #999;
  font-size: 0.32rem;
  display: flex;
  align-items: center;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-table
  .manufacturer-shopping-thead
  .one {
  width: 5.36rem;
  box-sizing: border-box;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-table
  .manufacturer-shopping-thead
  .two {
  width: 1.4666666666666666rem;
  justify-content: center;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-table
  .manufacturer-shopping-thead
  .three {
  width: 2.4rem;
  justify-content: center;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody {
  padding: 0 0.38666666666666666rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .tbody-list-first {
  display: flex;
  border-bottom: 0.013333333333333334rem solid #f2f2f2;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0.32rem 0 0.30666666666666664rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .tbody-list-first
  .shopping-name {
  font-size: 0.4rem;
  color: #4c4c4c;
  line-height: 0.64rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .tbody-list:last-child {
  border-bottom: none;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .tbody-list-second {
  display: flex;
  border-bottom: 0.013333333333333334rem solid #f2f2f2;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0.32rem 0 0.30666666666666664rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .tbody-list-second
  .dosage-view {
  display: flex;
  align-items: center;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .tbody-list-second
  .dosage-hint {
  display: flex;
  width: 5.12rem;
  height: 0.72rem;
  background: rgba(0, 0, 0, 0.68);
  border-radius: 0.16rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .tbody-list-second
  .dosage-hint
  img {
  width: 0.4rem;
  height: 0.4rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .tbody-list-third {
  display: flex;
  align-items: flex-start;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .tbody-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-top: 0.18666666666666668rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .one {
  width: 5.36rem;
  align-items: flex-start;
  box-sizing: border-box;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .one
  .shopping-info {
  line-height: 0.64rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .one
  .shopping-info
  .brandName {
  color: #5b5b5b;
  font-size: 0.36rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .one
  .shopping-info
  .partItemName {
  margin-left: 0.16rem;
  font-size: 0.36rem;
  color: #377de8;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .one
  .shopping-info
  .seriesName {
  font-size: 0.28rem;
  line-height: 0.4rem;
  background: #fab220;
  margin-left: 0.16rem;
  padding: 0.02666666666666667rem 0.13333333333333333rem;
  border-radius: 0.16rem 0.04rem;
  color: #fff;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .one
  .shoppingTradeName {
  font-size: 0.32rem;
  color: #ff9000;
  line-height: 0.56rem;
  margin-top: 0.05333333333333334rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .two {
  width: 1.4666666666666666rem;
  height: 0.64rem;
  align-items: center;
  color: #e74c3c;
  font-size: 0.4rem;
  box-sizing: content-box;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .three {
  width: 2.4rem;
  align-items: flex-end;
  padding-left: 0.26666666666666666rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .three
  .operate {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .three
  .operate
  .operate-num {
  flex: 1;
  word-break: break-all;
  text-align: center;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .three
  img {
  min-width: 0.64rem;
  max-width: 0.64rem;
  max-height: 0.64rem;
  min-height: 0.64rem;
  width: 0.64rem;
  height: 0.64rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .three
  .stock-info {
  font-size: 0.32rem;
  color: #8e8e8e;
  line-height: 0.56rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-main
  .manufacturer-shopping-tbody
  .three
  .stock-info
  .num {
  font-size: 0.4rem;
  font-weight: 550;
  color: #f34827;
  line-height: 0.56rem;
}
.manufacturer-shopping-submitOrder .manufacturer-shopping-footer {
  width: 100vw;
  height: 1.6rem;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 0.013333333333333334rem solid #cbd4e1;
  box-sizing: border-box;
}
.manufacturer-shopping-submitOrder .manufacturer-shopping-footer .cart-info {
  padding: 0.16rem 0.4rem;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-footer
  .cart-info
  .price {
  height: 0.72rem;
  font-size: 0.32rem;
  color: #5b5b5b;
  display: flex;
  align-items: center;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-footer
  .cart-info
  .price
  .fuhao {
  font-size: 0.32rem;
  color: #e74c3c;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-footer
  .cart-info
  .price
  .jine {
  font-size: 0.48rem;
  color: #e74c3c;
  font-weight: 600;
}
.manufacturer-shopping-submitOrder
  .manufacturer-shopping-footer
  .cart-info
  .shopNum {
  height: 0.56rem;
  font-size: 0.28rem;
  color: #8e8e8e;
  display: flex;
  align-items: center;
}
.manufacturer-shopping-submitOrder .manufacturer-shopping-footer .cart-addBtn {
  width: 3.6rem;
  height: 100%;
  background: #e74c3c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.48rem;
  color: #fff;
}
.deliveryInstructions-view {
  width: 100%;
  height: 1.28rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.32rem;
}
.text {
  font-size: 0.4rem;
  color: #1677ff;
  margin-right: 0.17333333333333334rem;
}
.arrow_right {
  width: 0.13333333333333333rem;
  height: 0.24rem;
}
.deliveryInstructions__wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 2001;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.48);
}
.deliveryInstructions__wrapper .deliveryInstructions {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 0.21333333333333335rem;
  width: 8rem;
  overflow: hidden;
}
.deliveryInstructions__wrapper
  .deliveryInstructions
  .deliveryInstructions__header {
  width: 100%;
  height: 1.28rem;
  background: rgba(229, 229, 229, 0.24);
  display: flex;
  justify-content: center;
  align-items: center;
}
.deliveryInstructions__wrapper
  .deliveryInstructions
  .deliveryInstructions__header
  .deliveryInstructions__title {
  font-size: 0.48rem;
  font-weight: 500;
  color: #333;
}
.deliveryInstructions__wrapper
  .deliveryInstructions
  .deliveryInstructions__body {
  width: 100%;
  padding: 0.24rem 0.36rem;
  box-sizing: border-box;
}
.deliveryInstructions__wrapper
  .deliveryInstructions
  .deliveryInstructions__body
  .label {
  height: 0.56rem;
  font-size: 0.4rem;
  font-weight: 500;
  color: #333;
  line-height: 0.56rem;
}
.deliveryInstructions__wrapper
  .deliveryInstructions
  .deliveryInstructions__body
  .content {
  margin-top: 0.08rem;
}
.deliveryInstructions__wrapper
  .deliveryInstructions
  .deliveryInstructions__body
  .content
  .item {
  font-size: 0.36rem;
  color: #5b5b5b;
  line-height: 0.64rem;
  word-break: break-all;
}
.deliveryInstructions__wrapper
  .deliveryInstructions
  .deliveryInstructions__body
  .content
  .mobile {
  font-size: 0.36rem;
  color: #1677ff;
}
.deliveryInstructions__wrapper
  .deliveryInstructions
  .deliveryInstructions__body
  .first {
  margin-bottom: 0.4rem;
}
.deliveryInstructions__wrapper
  .deliveryInstructions
  .deliveryInstructions__footer {
  height: 1.3066666666666666rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 0.013333333333333334rem solid #e5e5e5;
}
.deliveryInstructions__wrapper
  .deliveryInstructions
  .deliveryInstructions__footer
  .comDialog_footer_Btn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1677ff;
  font-size: 0.48rem;
  height: 1.3066666666666666rem;
  box-sizing: border-box;
  width: 50%;
}
.deliveryInstructions__wrapper
  .deliveryInstructions
  .deliveryInstructions__footer
  .closeBtn {
  font-size: 0.48rem;
  color: #1677ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.deliveryInstructions-main {
  padding: 0.32rem 0.4rem;
  background: #fff;
}
.deliveryInstructions-main .label {
  height: 0.56rem;
  font-size: 0.36rem;
  font-weight: 600;
  color: #f84624;
  line-height: 0.56rem;
}
.deliveryInstructions-main .content {
  margin-top: 0.08rem;
  background-color: #fff;
  overflow: hidden;
}
.deliveryInstructions-main .content .item {
  font-size: 0.32rem;
  color: #8e8e8e;
  line-height: 0.56rem;
  word-break: break-all;
}
.deliveryInstructions-main .first {
  margin-bottom: 0.24rem;
  display: flex;
  background: #fff;
  overflow: hidden;
}
.deliveryInstructions-main .second {
  margin-bottom: 0.24rem;
  display: flex;
}
.deliveryInstructions-main .left-box {
  flex: 1;
}
.deliveryInstructions-main .right_btn {
  margin-top: 0.64rem;
  width: 0.7466666666666667rem;
  height: 0.56rem;
  font-size: 0.32rem;
  color: #377de8;
  line-height: 0.56rem;
  margin-left: auto;
}
</style>


<style lang="stylus" scoped>
.cart-addBtn
  width 3.6rem
  height 100%
  background #e74c3c
  display flex
  align-items center
  justify-content space-between
  font-size .48rem
  color #ffffff
  flex-direction column
.cart-addBtn::before, .cart-addBtn::after
  content ''
  display block
.pay-addBtn2
  width 3.12rem
  height 100%
  background #e74c3c
  display flex
  align-items center
  justify-content center
  font-size .48rem
  color #ffffff
.discountPrice
  height .44rem
  font-size .28rem
  color #ffffff
  line-height .38rem
  display flex
  justify-content center
  align-items center
  .label
    white-space nowrap
    margin-right .05rem
.qrCode-main
  width 100%
  position relative
  .qrCodeImage
    width 100%
  .invalid-view
    width 100%
    height 100%
    position absolute
    left 0
    top 0
    background-color rgba(0, 0, 0, 0.68)
    z-index 3
    display flex
    justify-content center
    align-items center
    .text
      color #fff
      font-weight 500
      font-size 0.54rem
</style>